<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
	
    <link rel="shortcut icon" href="images/favicon/favicon.png" type="image/x-icon">
    <link rel="icon" href="images/favicon/favicon.png" type="image/x-icon">

    <title>Home</title>
	
    <!--Library Styles-->    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/lib/font-awesome.css" rel="stylesheet">
    <link href="css/lib/nivo-lightbox.css" rel="stylesheet">
    <link href="css/lib/nivo-themes/default/default.css" rel="stylesheet">
	
    <!--Template Styles-->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/scheme/purple.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body data-spy="scroll">

    <!-- Preloader -->
    <div id="preloader">
        <div id="status"></div>
    </div>
	
    <div id="main-wrapper">
        
        <!-- Site Navigation -->
        <div id="menu">
            <nav class="navbar navbar-default" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html#">
                        <img src="images/logo.png" alt="logo">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a class="sscroll" href="index.html#home">Home</a></li>
                        <li><a class="sscroll" href="index.html#services">Services</a></li>
                        <li><a class="sscroll" href="index.html#portfolio">Portfolio</a></li>
                        <li><a class="sscroll" href="index.html#testimonial">Testimonial</a></li>
                        <li><a class="sscroll" href="index.html#about">The Team</a></li>
                        <li><a class="sscroll" href="index.html#clients">Clients</a></li>
                        <li><a class="sscroll" href="index.html#blog-front">Blog</a></li>
                        <li><a class="sscroll" href="index.html#contact">Contact</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </nav>
        </div>
        
        <div id="container">
            <!-- BEGIN HOME -->
            <section id="home" class="home">
                <!-- Superslides -->
                <div id="home-slide">
                    <ul class="slides-container text-center">
                        <li>
                            <div class="slide-text">
                                <h2>Built With Bootstrap</h2>
                                <span>Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects</span>
                                <br/>
                            </div>
                          <div class="slide-filter"></div>
                            <img src="images/slider/slide-1.jpg" class="par" alt="first">
                        </li>
                        <li>
                            <div class="slide-text">
                                <h2>Fullscreen Slider</h2>
                                <span>Superslides - A fullscreen, hardware accelerated slider for jQuery</span>
                                <br/>
                            </div>
                          <div class="slide-filter"></div>
                            <img src="images/slider/slide-2.jpg" class="par" alt="first">
                        </li>
                        <li>
                            <div class="slide-text">
                                <h2>Elegant Design</h2>
                                <span>We focused on usability of the template and combined useful content blocks based on that</span>
                                <br/>
                            </div>
                          <div class="slide-filter"></div>
                            <img src="images/slider/slide-3.jpg" class="par" alt="first">
                        </li>
                    </ul>
                    <nav class="slides-navigation slidez">
                        <a href="javascript:;" class="next">
                            <i class="fa fa-angle-right"></i>
                        </a>
                        <a href="javascript:;" class="prev">
                            <i class="fa fa-angle-left"></i>
                        </a>
                    </nav>
                </div>
                <!-- End of Superslide -->
            </section>
            <!-- END HOME -->
            
            <!-- BEGIN SERVICES -->
            <section id="services" class="services">
                <div class="row">
                    <div class="col-md-12">
                        <div class="header-content">
                            <h2>Services</h2>
                            <h3>This is what we are good at</h3>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="service">
                                    <div class="icon-holder">
                                        <i class="fa fa-paper-plane"></i>
                                    </div>
                                    <h3 class="heading">Web Design</h3>
                                    <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
				</div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="service">
                                    <div class="icon-holder">
                                        <i class="fa fa-diamond"></i>
                                    </div>
                                    <h3 class="heading">Web Programming</h3>
                                    <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
				</div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="service">
                                    <div class="icon-holder">
                                        <i class="fa fa-camera"></i>
                                    </div>
                                    <h3 class="heading">Branding</h3>
                                    <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
				</div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="service">
                                    <div class="icon-holder">
                                        <i class="fa fa-heartbeat"></i>
                                    </div>
                                    <h3 class="heading">Consultation</h3>
                                    <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
				</div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="service">
                                    <div class="icon-holder">
                                        <i class="fa fa-life-ring"></i>
                                    </div>
                                    <h3 class="heading">Technical Writing</h3>
                                    <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
				</div>
                            </div>
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="service">
                                    <div class="icon-holder">
                                        <i class="fa fa-rocket"></i>
                                    </div>
                                    <h3 class="heading">Bug Hunt</h3>
                                    <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse scelerisque a aenean hac montes.</p>
				</div>
                            </div>
                        </div>
                    </div>                   
                </div>
            </section>
            <!-- END SERVICES -->
            <!-- BEGIN PORTFOLIO -->
            <section id="portfolio" class="portfolio gray">
                <div class="row">
                    <div class="col-md-12">
                        <div class="header-content">
                            <h2>Portfolio</h2>
                            <h3>Some of our accomplishments</h3>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <ul class="portfolioFilter text-center">
                            <li data-filter="websites">WEB SITES</li>
                            <li data-filter="illustrations">ILLUSTRATIONS</li>
                            <li data-filter="photo">PHOTOGRAPHS</li>
                            <li data-filter="all">EVERYTHING</li>
                        </ul>
                    </div>
                    <div class="col-md-12 mg-bt-80">
                        <div class="row portfolioContainer  text-center">
                            <div class="col-md-4 col-xs-6 portfolio-item websites">
                                <a class="popup" href="images/portfolio/portfolio-thumb-1.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Designing UI/UX
                                        </span>
                                    </span>
                                    <img src="images/portfolio/portfolio-thumb-1.jpg" alt="portfolio-thumb-1">
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-6 portfolio-item illustrations">
                                <a class="popup" href="images/portfolio/portfolio-thumb-5.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Designing Apps
                                        </span>
                                    </span>
                                    <img src="images/portfolio/portfolio-thumb-5.jpg" alt="portfolio-thumb-5">
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-6 portfolio-item websites">
                                <a class="popup" href="images/portfolio/portfolio-thumb-3.jpg" title="Image with title"  data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Branding Identity
                                        </span>
                                    </span>
                                    <img src="images/portfolio/portfolio-thumb-3.jpg" alt="portfolio-thumb-3">
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-6 portfolio-item photo">
                                <a class="popup" href="images/portfolio/portfolio-thumb-4.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Photography
                                        </span>
                                    </span>
                                    <img src="images/portfolio/portfolio-thumb-4.jpg" alt="portfolio-thumb-4">
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-6 portfolio-item websites">
                                <a class="popup" href="images/portfolio/portfolio-thumb-2.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Website Design
                                        </span>
                                    </span>
                                    <img src="images/portfolio/portfolio-thumb-2.jpg" alt="portfolio-thumb-2">
                                </a>
                            </div>
                            <div class="col-md-4 col-xs-6 portfolio-item illustrations">
                                <a class="popup" href="images/portfolio/portfolio-thumb-6.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Branding Illustration
                                        </span>
                                    </span>
                                    <img src="images/portfolio/portfolio-thumb-6.jpg" alt="portfolio-thumb-6">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- END PORTFOLIO -->
            
            <!-- BEGIN TESTIMONIAL -->
            <section id="testimonial" class="testimonial">
                
                <div class="row">
                    <div class="col-md-12 mg-bt-80">
                        <div class="header-content">
                            <h2>Testimonials</h2>
                            <h3>What Clients are saying about us?</h3>
                        </div>
                    </div>
                    
                    <div class="col-md-12">
                        <div id="bx-pager" class="client-photos">
                            <a class="client-photo" data-slide-index="0" href="">
                              <img alt="" src="images/clients/avatar-1.jpg"> <!-- Client photo 1 -->
                            </a>
                            <a class="client-photo" data-slide-index="1" href="">
                               <img alt="" src="images/clients/avatar-2.jpg"> <!-- Client photo 2 -->
                            </a>
                            <a class="client-photo" data-slide-index="2" href="">
                              <img alt="" src="images/clients/avatar-3.jpg"> <!-- Client photo 3 -->
                            </a>
                        </div>
                    <ul class="bxslider">
                        <li>
                            <h3>Work with TEAM was a pleasure. They understood exactly what I wanted and created an awesome site for my company.</h3>
                            <span>&mdash;<strong>Jane Pearson</strong>, CEO Pearson Associates</span>
                        </li>
                        <li>
                            <h3>I'm really happy with the results. Get 100% satisfaction is difficult but TEAM got it without problems.</h3>
                            <span>&mdash;<strong>Roy Royce</strong>, DevX</span>
                        </li>
                        <li>
                            <h3>If you wish success in life, make perseverance your bosom friend, experience your wise counselor, caution your elder brother and hope your guardian genius.</h3>
                            <span>&mdash;<strong>Minion Max</strong>, Bubble Gum</span>
                        </li>
                    </ul>
                        
                    </div>
                </div>
                
            </section>
            <!-- END TESTIMONIAL -->
            
            <!-- BEGIN TEAM -->
            <section id="about" class="about gray">
                <div class="row">
                    <div class="col-md-12 mg-bt-80">
                        <div class="header-content">
                            <h2>The Team</h2>
                            <h3>People behind the success</h3>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="row mg-bt-40">
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="teams">
                                    <div class="pict">
                                        <img src="images/team/01.jpg" alt="Team 1">
                                    </div>
                                    <div class="desc">
                                        <h3>John Doe</h3>
                                        <span>Web Developer</span>
                                        <div class="social">
                                            <a href="javascript:;"><i class="fa fa-facebook"></i></a>
                                            <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                                            <a href="javascript:;"><i class="fa fa-pinterest"></i></a>
                                            <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                                        </div>
                                    </div>

                                </div>
                          </div>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="teams">
                                    <div class="pict">
                                        <img src="images/team/02.jpg" alt="Team 1">
                                    </div>
                                    <div class="desc">
                                        <h3>Jane Doe</h3>
                                        <span>Creative Writer</span>
                                        <div class="social">
                                            <a href="javascript:;"><i class="fa fa-pinterest"></i></a>
                                            <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                                            <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                                            <a href="javascript:;"><i class="fa fa-linkedin"></i></a>
                                        </div>
                                    </div>

                                </div>
                          </div>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="teams">
                                    <div class="pict">
                                        <img src="images/team/03.jpg" alt="Team 1">
                                    </div>
                                    <div class="desc">
                                        <h3>John Doe</h3>
                                        <span>Designer</span>
                                        <div class="social">
                                            <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                                            <a href="javascript:;"><i class="fa fa-google-plus"></i></a>
                                            <a href="javascript:;"><i class="fa fa-linkedin"></i></a>
                                            <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                                        </div>
                                    </div>

                                </div>
                          </div>
                            <div class="col-md-3 col-sm-6 col-xs-12">
                                <div class="teams">
                                    <div class="pict">
                                        <img src="images/team/04.jpg" alt="Team 1">
                                    </div>
                                    <div class="desc">
                                        <h3>Jane Doe</h3>
                                        <span>Creative Writer</span>
                                        <div class="social">
                                            <a href="javascript:;"><i class="fa fa-facebook"></i></a>
                                            <a href="javascript:;"><i class="fa fa-instagram"></i></a>
                                            <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                                            <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- END TEAM -->
            
            <!-- BEGIN CLIENTS -->
            <section id="clients" class="clients">
                <div class="row">
                    <div class="col-md-12 mg-bt-80">
                        <div class="header-content">
                            <h2>Clients</h2>
                            <h3>Some of our clients</h3>
                        </div>
                    </div>                    
                    <div class="col-lg-12">
                        <div class="row mg-bt-60">
                            <div class="col-md-12">
                                <ul class="client-slider">
                                    <li><img src="images/clients/logo1.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo2.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo3.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo4.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo5.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo6.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo7.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo8.png" alt="logo-1"></li>
                                    <li><img src="images/clients/logo9.png" alt="logo-1"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- END CLIENTS -->

            <!-- BEGIN BLOG -->
            <section id="blog-front" class="blog-front gray">
                <div class="row">
                    <div class="col-md-12 mg-bt-80">
                        <div class="header-content">
                            <h2>Blog</h2>
                            <h3>Thoughts on design and development trends</h3>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <article class="col-md-4 col-sm-6">
                        <figure class="blog-thumb">
                            <img src="images/blog/blog-1.jpg" alt="blog-thumb">
                        </figure>
                        <div class="post-area">
                            <a class="post-cat" href="">
                            <h4>Design</h4>
                            </a>
                            <a class="post-title" href="blog-post.html">
                                <h3>At vero eos et accusamus et iusto odio dignissimos</h3>
                            </a>
                            <p class="post-content">No one lights a lamp in order to hide it behind the door: the purpose of light is to create more light, to open people’s eyes, to reveal the marvels around ...</p>                            
                        </div>
                    </article>

                    <article class="col-md-4 col-sm-6">
                        <figure class="blog-thumb">
                            <img src="images/blog/blog-2.jpg" alt="blog-thumb">
                        </figure>
                        <div class="post-area">
                            <a class="post-cat" href="">
                            <h4>Illustration</h4>
                            </a>
                            <a class="post-title" href="blog-post.html">
                                <h3>At vero eos et accusamus et iusto odio dignissimos</h3>
                            </a>
                            <p class="post-content">No one lights a lamp in order to hide it behind the door: the purpose of light is to create more light, to open people’s eyes, to reveal the marvels around ...</p>
                        </div>
                    </article>

                    <article class="col-md-4 col-sm-6">
                        <figure class="blog-thumb">
                            <img src="images/blog/blog-3.jpg" alt="blog-thumb">
                        </figure>
                        <div class="post-area">
                            <a class="post-cat" href="">
                            <h4>Inspiration</h4>
                            </a>
                            <a class="post-title" href="blog-post.html">
                                <h3>At vero eos et accusamus et iusto odio dignissimos</h3>
                            </a>
                            <p class="post-content">No one lights a lamp in order to hide it behind the door: the purpose of light is to create more light, to open people’s eyes, to reveal the marvels around ...</p>
                        </div>
                    </article>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <a class="btn blog-btn" href="blog.html">See what else is going on...</a>
                    </div>
                </div>
            </section>
            <!-- END BLOG -->
            
            <!-- BEGIN SUBSCRIPTION -->
            <section class="subscribe text-center">
                <div class="row">
                    <div class="col-md-12">
                        <h3>Stay Tuned by subscribing to our Newsletter.</h3>
                        <p>We will not share your email.</p>

                        <form role="form">
                            <input type="text" class="form-control placeholder" placeholder="Enter Your Email">
                            <button class="btn" type="submit">Subscribe</button>
                        </form>
                    </div>
                </div>                
            </section>
            <!-- END SUBSCRIPTION -->
            
            <!-- BEGIN CTA -->
            <section class="cta text-center">
                <div class="row">
                    <div class="col-md-12">
                        <h3>Purchase Team Pro and Get Access To</h3>
                        <p>6 Pre-built color scheme, less, php enabled contact form, slider and parallax home and Pro SUPPORT</p>
                    </div>
                </div>                
            </section>
            <!-- END CTA -->

            <!-- BEGIN CONTACT -->
            <section id="contact" class="contact gray">
                <div class="row">
                    <div class="col-md-12 mg-bt-80">
                        <div class="header-content">
                            <h2>Contact Us</h2>
                            <h3>Let us know if you have any query</h3>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="address">
                            <h2>Get in touch</h2>
                            <p>Quod cum ita sit, paucae domus stud torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor a</p>
                            <h2>Team Office</h2>
                            <ul class="office">
                                <li><i class="fa fa-map-marker"></i> <strong>Address:</strong> 1234 Street Name, City Name, United States</li>
                                <li><i class="fa fa-phone"></i> <strong>Phone:</strong> (123) 456-7890</li>
                                <li><i class="fa fa-envelope"></i> <strong>Email:</strong> <a href="mailto:mail@example.com">mail@example.com</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <form id="contact-form" role="form">                            
                            <div class="form-group">
                                <input type="text" class="form-control" id="c_name" placeholder="Name">
                            </div>
                            
                            <div class="form-group">
                                <input type="email" class="form-control" id="c_email" placeholder="Email">                                
                            </div>
                            
                            <div class="form-group">
                                <textarea class="form-control" id="c_message" rows="10" placeholder="Message"></textarea>
                            </div>
                            <br/>
                            <button type="submit" class="btn">Send Message</button>
                            <div class="ajax-response"></div>
                        </form>
                    </div>
                    
                </div>
            </section>
            <!-- END CONTACT -->
            <!-- BEGIN FOOTER -->
            <footer>
                <div class="row">
                    <div class="col-md-12">
                        <div class="social">
                            <a href="javascript:;"><i class="fa fa-facebook"></i></a>
                            <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                            <a href="javascript:;"><i class="fa fa-pinterest"></i></a>
                            <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                </div>
                        <p>
                            Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                        </p>                        
                    </div>
                </div>
            </footer>
            <!-- END FOOTER -->
        </div>
    </div>


    <!-- Back to top -->
    <div id="backtotop">       
        <a class="to-top-btn sscroll" href="index.html#home"><i class="fa fa-angle-double-up"></i></a>
    </div>


    <!-- Library Scripts -->
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- <script src="js/jquery-1.10.2.min.js"></script> -->
    <script src="js/lib/jquery.preloader.js"></script>
    <script src="js/lib/nivo-lightbox.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lib/jquery.superslides.min.js"></script>
    <script src="js/lib/smoothscroll.js"></script>
    <script src="js/lib/jquery.sudoslider.min.js"></script>
    <script src="js/lib/jquery.bxslider.min.js"></script>
    <script src="js/lib/jquery.mixitup.min.js"></script>
    <script src="js/lib/jquery.backtotop.js"></script>
    <script src="js/lib/jquery.carouFredSel-6.2.1-packed.js"></script>
    <script src="js/lib/retina.min.js"></script>

    <!-- Custom Script -->    
    <script src="js/main.js"></script>
</body>

</html>
